<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<!-- 单选 -->
			<label><input type="checkbox" name="" id="" value="" v-model="isAgree"/>1</label>
			<h2>您选择的是：{{isAgree}}</h2>
			<button :disabled="!isAgree">下一步</button>
			
			<!-- 多选 -->
			<label><input type="checkbox" name="" id="" value="篮球" v-model="hobbies"/>篮球</label>
			<label><input type="checkbox" name="" id="" value="足球" v-model="hobbies"/>足球</label>
			<label><input type="checkbox" name="" id="" value="乒乓球" v-model="hobbies"/>乒乓球</label>
			<label><input type="checkbox" name="" id="" value="羽毛球" v-model="hobbies"/>羽毛球</label>
			<h2>选择的的爱好：{{showHobbies}}</h2>
			
			<!-- 值绑定 -->
			<label v-for="item in originHobbies"><input type="checkbox" name="" :id="item" :value="item" v-model="hobbies"/>{{item}}</label>
		</div>
	</body>
	<script type="text/javascript">
		const app = new Vue({
			el:'#app',
			data:{
				message:'你好',
				isAgree:false,//单选框
				hobbies:[],//多选框
				originHobbies:['篮球', '足球', '乒乓球', '羽毛球']
			},
			computed:{
				showHobbies(){
					var html = "";
					for (let i in this.hobbies) {
						html += this.hobbies[i] + "、"
					}
					return html
				}
			}
		})
	</script>
</html>
